<template>
  <div class="topicnav">
    <Header title="选择话题" :xiao="xiao" @goback="$router.push('/addinput')" style="position: fixed;" />
    <div class="box"></div>
    <Banner :TabList="TabList" @changeTab="changeTab" style=" width: 96%;
  margin-left: 2%;margin-top: 20px;">
      <List2 slot="content" :ContentList1="ContentList" v-show="ContentList.length !== 0" />
      <Nothing slot="content" v-show="ContentList.length === 0" />
    </Banner>
  </div>
</template>

<script>
// Header
import Header from '@/components/common/Header.vue';
// 滑动tab+content
import Banner from '@/components/common/Banner.vue';
// List2
import List2 from '@/components/common/List2.vue';
// 空样式
import Nothing from '@/components/common/Nothing.vue';
export default {
  components: { Header, Banner, List2, Nothing },
  data() {
    return {
      // 控制小于号的显示隐藏
      xiao: true,
      // tab
      TabList: [],
      // content
      ContentList: []
    }
  },
  methods: {
    // tab
    inittab() {
      this.$http.get('topicclass').then((res) => {
        if (res.status === 200) {
          this.TabList = res.data.data.list
          console.log(this.TabList);
        }
      })
    },
    // 1.1初始页面调用的接口
    // 1.2父组件帮子组件完成的任务
    changeTab(val) {
      this.$http.get(`topicclass/${val}/topic/1`).then((res) => {
        console.log(res);
        let status = res.status
        if (status === 200) {
          setTimeout(() => {
            this.ContentList = res.data.data.list
            console.log('ContentList', this.ContentList)
          }, 2000)
        }
      })
    },
  },
  created() {
    this.inittab()
    this.changeTab(1)
  }
}
</script>

<style lang="scss" scoped>
$width: 100%;

.box {
  height: 44px;
  width: $width;
}

.picnav {
  position: relative;
  flex: 1;
}
</style>